<template lang="html">
    <div class="radioList">
        <!-- 自定义组件 -->
        <RadioTitle  title="电台排行" />
        <div class="container">
            <router-link to="/radiolist/showlist" class="showContainer" tag="div">
                <div class="text">最热节目</div>
                <div class="jiantou">
                    <img src="../../assets/images/icon-next20.png" alt="">
                </div>
            </router-link>
            <div class="card" >
                <div class="card-slider">
                    <div class="poster">
                        <img src="../../assets/images/radio-pic1.png" alt="">
                    </div>
                </div>
                <div class="info">
                    <div class="name">跨界也是很疯狂</div>
                </div>
            </div>
            <div class="card" >
                <div class="card-slider">
                    <div class="poster">
                        <img src="../../assets/images/26370.220.png" alt="">
                    </div>
                </div>
                <div class="info">
                    <div class="name">你向往的地方在哪</div>
                </div>
            </div>
        </div>
        <div class="hotradio">
            <router-link to="/radiolist/hotradio"  class="showContainer"  tag="div">
                  <router-link to="hotradio" class="text" tag="div">最热电台</router-link>
                  <div class="jiantou">
                      <img src="../../assets/images/icon-next20.png" alt="">
                  </div>
            </router-link>
            <!-- 自定义组件-->
            <SuperHotRadio />
        </div>

    </div>
</template>

<script>
import RadioTitle from "../../components/radioTitle"
import SuperHotRadio from "../../components/superHotRadio"
export default {
    name:"radiolist",
    data(){
      return{

      }
    },
    components:{
      RadioTitle,
      SuperHotRadio
    }
}
</script>

<style scoped>
.showContainer{
  width: 100%;
  height: 0.7rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  background-color: #fff;
}
.showContainer .text{
  float: left;
  font-size: 18px;
  margin-top:0.2rem;
}
.showContainer .jiantou{
  float: right;
  margin: 0.2rem 0 0 0;
}
.hotradio{
  margin-top: 0.21rem;
  background-color: #fff;
}

.container{
  clear: both;
  overflow: hidden;
  background-color: #fff;
}
.container .card{
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px 20px;
}
.poster img{
  width:3.7rem;
  height: 2.2rem;
}

</style>
